<template>
    <div class="top">
        <div class="d-flex jc-center">
            <div class="d-flex title-but but-left">
                <div><span :class="`text ${$route.name=='enterprise'?'curHover':''}`" @click="goRouter('enterprise')">企业</span></div>
                <div><span :class="`text ${$route.name=='people'?'curHover':''}`" @click="goRouter('people')">人才</span></div>
            </div>
            <div class="topTitle">
                <span class="titleText">{{title}}</span>
            </div>
            <div class="d-flex title-but but-right">
                <div><span :class="`text ${$route.name=='scenicSpot'?'curHover':''}`" @click="goRouter('scenicSpot')">基地</span></div>
                <div><span :class="`text ${$route.name=='crew'?'curHover':''}`" @click="goRouter('crew')">剧组</span></div>
            </div>
        </div>

        <div class="d-flex jc-center" v-if="false">
            <dv-decoration-10 class="dv-dec-10" />
            <div class="d-flex jc-center">
                <dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']" />
                <div class="title">
                    <span class="title-text">{{title}}</span>
                    <dv-decoration-6
                            class="dv-dec-6"
                            :reverse="true"
                            :color="['#50e3c2', '#67a1e5']"
                    />
                </div>
                <dv-decoration-8
                        class="dv-dec-8"
                        :reverse="true"
                        :color="['#568aea', '#000000']"
                />
            </div>
            <dv-decoration-10 class="dv-dec-10-s" />
        </div>
        <!-- 第二行 -->
        <div class="d-flex jc-between px-2" v-if="false">
            <div class="d-flex aside-width">
                <div class="react-left react-l-s">
                    <span class="react-before"></span>
                    <!--<span class="text">企业</span>-->
                </div>
                <div :class="`react-left bg-color-blue ml-3 ccursor ${$route.name=='enterprise'?'bg-color-blue-h':''}`" style="border-radius: 8px;" @click="goRouter('enterprise')">
                    <span class="text">企业</span>
                </div>
                <div :class="`react-left bg-color-blue ml-3 ccursor ${$route.name=='people'?'bg-color-blue-h':''}`" style="border-radius: 8px" @click="goRouter('people')">
                    <span class="text">人才</span>
                    <!--<dv-border-box-2 :color="['#fff','#1a5cd7']">人才</dv-border-box-2>-->
                    <!-- $route.name -->
                </div>
            </div>
            <div class="d-flex aside-width">
                <div :class="`react-right bg-color-blue mr-3 ccursor ${$route.name=='scenicSpot'?'bg-color-blue-h':''}`" style="border-radius: 8px" @click="goRouter('scenicSpot')">
                    <span class="text">基地</span>
                </div>
                <div :class="`react-right bg-color-blue mr-3 ccursor ${$route.name=='crew'?'bg-color-blue-h':''}`" style="border-radius: 8px" @click="goRouter('crew')">
                    <span class="text">剧组</span>
                </div>
                <div class="react-right react-l-s">
                    <span class="react-after"></span>
                    <!--<span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>-->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "top",
        components: {},
        props: {
            title: {
                type: String,
                default: '横店影视文化产业驾驶舱'
            }
        },
        data () {
            return {}
        },
        mounted() {
        },
        methods: {
            goRouter(name){
                if( name === this.$route.name ) return
                this.$router.push({name: name})
            }
        }
    }
</script>

<style scoped lang="scss">
    .top { width: 100%; height: 98px;
        background-image: url("~@/assets/top-bg.jpg");
        background-size: cover;
        background-position: center center;
    }
    .topTitle {
        width: 580px; margin-top:25px; text-align: center; position: relative;
        .titleText { font-size: 32px; color: #38edff;position: absolute; top: 0; left: 0; right: 0; line-height: initial}
    }
    .title-but { margin-top: 56px;
        div{ margin: 0 10px; text-align: center;}
        .text {display: block; width: 80px; height: 40px; line-height: 40px; cursor: pointer;
            color: #09a1cd; font-size: 18px; font-family: "Microsoft YaHei UI";
            border-top-left-radius: 6px; border-top-right-radius: 6px;
            /*background: #3174a4;*/
        }
        .text:hover, .curHover{
            color: #fff;
            background: linear-gradient(to bottom, #15c7cd, #00baff);
            border-top-left-radius: 6px; border-top-right-radius: 6px;
        }
    }
    .but-left { margin-right: 50px;}
    .but-right {margin-left: 50px;}

.ccursor { cursor: pointer }
</style>
